<template>
  <!-- <div> -->
  <div class="Statistic_box">
    <el-row>
      <el-col :span="6">
        <el-statistic title="总评论数据" :value="Statistic_list.SUM ? Statistic_list.SUM : '无'" />
      </el-col>

      <el-col :span="6">
        <el-statistic title="景点名字" :value="Statistic_list.DIM_SPOT ? Statistic_list.DIM_SPOT : '无'" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="平均评分" :value="Statistic_list.GRADE ? Statistic_list.GRADE : '无'" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="热度" :value="Statistic_list.HOT ? Statistic_list.HOT : '无'" />
      </el-col>
    </el-row>
  </div>
  <!-- </div> -->
</template>

<script setup lang="ts">
import { getData_list } from "@/request/comment";

let Statistic_list = ref("");
const props = defineProps({
  city_list: {
    type: String,
    default: 0
  }
});

onMounted(() => {
  // initEcharts();
  // getData();
  // console.log(props.city_id_list);
});

const getData = async item => {
  // console.log("heeeeee",item);
  
  await getData_list({
    list_id: item
  }).then(({data}) => {
    console.log(data[0]);
    Statistic_list.value = data[0]
    console.log(Statistic_list.value);
    
//   }).then(({ data }) => {
    // console.log(data);

    // Statistic_list.value = data;
  });
};

watch(
  () => props.city_list,
  (newValue, oldValue) => {
    if (newValue) {
      getData(newValue);
    }
  }
);
</script>

<style lang="scss" scoped>
.Statistic_box {
  height: 100%;
  width: 100%;
  /* height: 500px; */

//  background-color: rgb(28, 125, 211); 
margin-bottom: 5px;
}

.el-col {
  text-align: center;
}
</style>